'use client'

import { useState } from 'react'
import DropDownPC from './dropdown-pc'
import { usePathname, useSearchParams } from 'next/navigation'
import { useRouter } from 'next-nprogress-bar'

interface TagProps {
  id: string
  isSelected: boolean
  children: React.ReactNode
  onClick: (id: string) => void
}

const Tag: React.FC<TagProps> = (props) => {
  const { id, isSelected, children, onClick } = props
  return (
    <div
      className={`px-[0.9375rem] py-[0.4375rem] text-[0.75rem] leading-[1rem] rounded-[0.125rem] 2xl:px-[1.40625rem] 2xl:py-[0.65625rem] 2xl:text-[1.125rem] 2xl:leading-[1.5rem] 2xl:rounded-[0.1875rem] cursor-pointer text-nowrap whitespace-nowrap mr-[1.375rem] mb-[1.375rem] 2xl:mr-[2.0625rem] 2xl:mb-[2.0625rem] ${
        isSelected ? 'text-white bg-[#91B01C]' : 'text-[#666666]'
      }`}
      onClick={(e) => {
        e.preventDefault()
        onClick(id)
      }}
    >
      {children}
    </div>
  )
}

interface FilterPCProps {
  industryLabel: string
  categoryLabel: string
  manufacturerLabel: string
  modelLabel: string
  updateButtonLabel: string

  industries: ProductCategory[]
  initialIndustryId: string

  // 下拉列表
  manufacturerItems: Manufacturer[]
  modelItems: Model[]
}

const FilterPC: React.FC<FilterPCProps> = (props) => {
  const {
    industryLabel,
    categoryLabel,
    manufacturerLabel,
    modelLabel,
    updateButtonLabel,
    industries,
    initialIndustryId,
    manufacturerItems,
    modelItems,
  } = props

  const searchParams = useSearchParams()
  const pathname = usePathname()
  const router = useRouter()

  const selectedIndustryId = searchParams.get('industry') || initialIndustryId
  const currentCategories = [
    { id: 0, title: 'All' },
    ...industries.find((item) => item.id.toString() === selectedIndustryId)
      ?.item!,
  ]
  const selectedCategoryId = searchParams.get('category') || '0'

  const handleTapIndustry = (id: string) => {
    const params = new URLSearchParams(searchParams)
    params.set('industry', id)
    params.set('category', '0')
    router.replace(`${pathname}?${params.toString()}`, { scroll: false })
  }

  const handleTapCategory = (id: string) => {
    const params = new URLSearchParams(searchParams)
    if (id === '0') {
      params.delete('category')
    } else {
      params.set('category', id)
    }
    router.replace(`${pathname}?${params.toString()}`, { scroll: false })
  }

  /* ----------------------------------- 分隔 ----------------------------------- */

  const [selectedIds, setSelectedIds] = useState({
    industry: '',
    category: '',
    manufacturer: '',
    model: '',
  })

  const handleSelect = (id: string, field: string) => {
    setSelectedIds({
      ...selectedIds,
      [field]: id,
    })
  }

  const handleUpdate = () => {
    const params = new URLSearchParams(searchParams)
    if (selectedIds.industry) {
      params.set('industry', selectedIds.industry)
    } else {
      params.delete('industry')
    }
    if (selectedIds.category) {
      if (selectedIds.category === '0') {
        params.delete('category')
      } else {
        params.set('category', selectedIds.category)
      }
    } else {
      params.delete('category')
    }
    if (selectedIds.manufacturer) {
      params.set('manufacturer', selectedIds.manufacturer)
    } else {
      params.delete('manufacturer')
    }
    if (selectedIds.model) {
      params.set('model', selectedIds.manufacturer)
    } else {
      params.delete('model')
    }
    router.replace(`${pathname}?${params.toString()}`, { scroll: false })
  }

  return (
    <div className='hidden lg:block '>
      <div className='border-[1px] border-solid border-[#E8E8E8] p-4 2xl:p-6'>
        <div className='flex'>
          <div className='py-[0.4375rem] 2xl:py-[0.65625rem] text-black text-[0.8125rem] leading-[1rem] min-w-[4.0625rem] 2xl:min-w-[6.09375rem] 2xl:text-[1.21875rem] 2xl:leading-[1.5rem]'>
            {industryLabel}:
          </div>
          <div className='w-3 2xl:w-[1.125rem]'></div>
          <div className='flex space-x-[1.375rem] 2xl:space-x-[2.0625rem] overflow-x-scroll flex-grow-0'>
            {industries.map((industry) => {
              return (
                <Tag
                  id={industry.id.toString()}
                  key={industry.id}
                  isSelected={selectedIndustryId === industry.id.toString()}
                  onClick={(id: string) => handleTapIndustry(id)}
                >
                  {industry.title}
                </Tag>
              )
            })}
          </div>
        </div>
        <div className='flex'>
          <div className='py-[0.4375rem] 2xl:py-[0.65625rem] text-black text-[0.8125rem] leading-[1rem] min-w-[4.0625rem] 2xl:min-w-[6.09375rem] 2xl:text-[1.21875rem] 2xl:leading-[1.5rem]'>
            {categoryLabel}:
          </div>
          <div className='w-3 2xl:w-[1.125rem]'></div>
          <div className='flex flex-grow-0 flex-wrap'>
            {currentCategories &&
              currentCategories.map((category) => {
                return (
                  <Tag
                    id={category.id.toString()}
                    key={category.id}
                    isSelected={selectedCategoryId === category.id.toString()}
                    onClick={(id: string) => handleTapCategory(id)}
                  >
                    {category.title}
                  </Tag>
                )
              })}
          </div>
        </div>
      </div>
      <div className='h-5 lg:h-[1.875rem]' />
      <div className='flex items-stretch justify-between'>
        <DropDownPC
          selectedId={selectedIds.industry}
          onSelect={(id) => handleSelect(id, 'industry')}
          items={industries}
        >
          {industryLabel}
        </DropDownPC>
        <DropDownPC
          selectedId={selectedIds.category}
          onSelect={(id) => handleSelect(id, 'category')}
          items={currentCategories}
        >
          {categoryLabel}
        </DropDownPC>
        <DropDownPC
          selectedId={selectedIds.manufacturer}
          onSelect={(id) => handleSelect(id, 'manufacturer')}
          items={manufacturerItems}
        >
          {manufacturerLabel}
        </DropDownPC>
        <DropDownPC
          selectedId={selectedIds.model}
          onSelect={(id) => handleSelect(id, 'model')}
          items={modelItems}
        >
          {modelLabel}
        </DropDownPC>
        <button
          className='uppercase min-w-[9.6rem] h-[2.6875rem] flex justify-center items-center rounded-[0.4375rem] bg-[#91B01C] text-white text-[1rem] leading-[1rem] 2xl:text-[1.5rem] 2xl:leading-[1.5rem] 2xl:min-w-[12rem] 2xl:h-[4.03125rem]'
          onClick={handleUpdate}
        >
          {updateButtonLabel}
        </button>
      </div>
    </div>
  )
}

export default FilterPC
